<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>搜索页</title>
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../css/all.css"/>
    <link rel="stylesheet" type="text/css" href="../css/pages-list.css"/>

    <script type="text/javascript" src="../js/all.js"></script>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../js/pages/index.js"></script>

    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>

    <!--elementUI东西-->
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <div id="nav-bottom">
        <!--顶部-->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <ul class="fl">
                            <li class="f-item">汇才商城欢迎您！</li>
                            <li class="f-item">
                                <a th:if="${session.user!=null}" href="#" th:text="${session.user.userName}"></a>
                                <a th:if="${session.user==null}" href="login.html">登录</a>
                                <span>
								<a th:if="${session.user==null}" href="register.html">免费注册</a>
								<a th:if="${session.user!=null}" href="javascript:;" onclick="userLogout()">退出</a>
							</span>
                            </li>
                        </ul>
                        <div class="fr typelist">
                            <ul class="types">
                                <li class="f-item">
                                <span>
                                    <a href="javascript:;" onclick="userOrder()">我的订单</a>
                                </span>
                                </li>

                                <li class="f-item"><span>
                                    <a href="javascript:;" onclick="getShopCartByUid()">我的购物车</a>
                                </span></li>
                                <li class="f-item"><span><a href="home.html" target="_blank">我的汇才</a></span></li>
                                <li class="f-item"><span>汇才会员</span></li>
                                <li class="f-item"><span>企业采购</span></li>
                                <li class="f-item"><span>关注汇才商城</span></li>
                                <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                                <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>

                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="汇才商城" href="index.html"></a>
                        </div>
                        <div class="yui3-u Rit searchArea">
                            <div class="search">
                                <div class="sui-form form-inline">
                                    <!--searchAutoComplete-->
                                    <div class="input-append">
                                        <input type="text" class="input-error input-xxlarge" v-on:keyup="fuzzyPagingQuery"
                                               v-model="productName" v-on:keydown="fuzzyPagingQuery"/>
                                        <input class="sui-btn btn-xlarge btn-danger" type="button" @click="fuzzyPagingQuery"
                                               value="搜索"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 商品分类导航 -->
    <div class="typeNav">
        <div class="py-container">
            <div class="yui3-g NavList">
                <div class="all-sorts-list">
                    <div class="yui3-u Left all-sort">
                        <h4>全部商品分类</h4>
                    </div>
                    <div class="sort">
                        <div class="all-sort-list2">
                            <div class="item bo">
                                <h3><a href="">图书、音像、数字商品</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书</a></dt>
                                            <dd><a href="">免费</a><a href="">小说</a></em><a href="">励志与成功</a><em><a href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">家用电器</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书1</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                        <dl class="fore9">
                                            <dt>少儿</dt>
                                            <dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a
                                                    href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">手机、数码</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书2</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">电脑、办公</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书3</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                        <dl class="fore9">
                                            <dt>少儿</dt>
                                            <dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a
                                                    href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
                                        </dl>
                                        <dl class="fore10">
                                            <dt>教育</dt>
                                            <dd><em><a href="">教材教辅</a></em><em><a href="">考试</a></em><em><a href="">外语学习</a></em></dd>
                                        </dl>
                                        <dl class="fore11">
                                            <dt>其它</dt>
                                            <dd><em><a href="">英文原版书</a></em><em><a href="">港台图书</a></em><em><a href="">工具书</a></em><em><a
                                                    href="">套装书</a></em><em><a href="">杂志/期刊</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">家居、家具、家装、厨具</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书4</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                        <dl class="fore9">
                                            <dt>少儿</dt>
                                            <dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a
                                                    href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">服饰内衣</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书5</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">个护化妆</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书6</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                        <dl class="fore9">
                                            <dt>少儿</dt>
                                            <dd><em><a href="">少儿</a></em><em><a href="">0-2岁</a></em><em><a href="">3-6岁</a></em><em><a
                                                    href="">7-10岁</a></em><em><a href="">11-14岁</a></em></dd>
                                        </dl>
                                        <dl class="fore10">
                                            <dt>教育</dt>
                                            <dd><em><a href="">教材教辅</a></em><em><a href="">考试</a></em><em><a href="">外语学习</a></em></dd>
                                        </dl>
                                        <dl class="fore11">
                                            <dt>其它</dt>
                                            <dd><em><a href="">英文原版书</a></em><em><a href="">港台图书</a></em><em><a href="">工具书</a></em><em><a
                                                    href="">套装书</a></em><em><a href="">杂志/期刊</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">运动健康</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书7</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                    </div>
                                    <div class="cat-right">
                                        <dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
                                            <dt>推荐品牌出版商</dt>
                                            <dd>
                                                <ul>
                                                    <li>
                                                        <a href="">中华书局</a>
                                                    </li>
                                                    <li>
                                                        <a href="">人民邮电出版社</a>
                                                    </li>
                                                </ul>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">汽车用品</a></h3>
                                <div class="item-list clearfix">
                                    <div class="subitem">
                                        <dl class="fore1">
                                            <dt><a href="">电子书8</a></dt>
                                            <dd><em><a href="">免费</a></em><em><a href="">小说</a></em><em><a href="">励志与成功</a></em><em><a
                                                    href="">婚恋/两性</a></em><em><a
                                                    href="">文学</a></em><em><a href="">经管</a></em><em><a href="">畅读VIP</a></em></dd>
                                        </dl>
                                        <dl class="fore2">
                                            <dt><a href="">数字音乐</a></dt>
                                            <dd><em><a href="">通俗流行</a></em><em><a href="">古典音乐</a></em><em><a href="">摇滚说唱</a></em><em><a
                                                    href="">爵士蓝调</a></em><em><a href="">乡村民谣</a></em><em><a href="">有声读物</a></em></dd>
                                        </dl>
                                        <dl class="fore3">
                                            <dt><a href="">音像</a></dt>
                                            <dd><em><a href="">音乐</a></em><em><a href="">影视</a></em><em><a href="">教育音像</a></em><em><a
                                                    href="">游戏</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore4">
                                            <dt>文艺</dt>
                                            <dd><em><a href="">小说</a></em><em><a href="">文学</a></em><em><a href="">青春文学</a></em><em><a
                                                    href="">传记</a></em><em><a
                                                    href="">艺术</a></em></dd>
                                        </dl>
                                        <dl class="fore5">
                                            <dt>人文社科</dt>
                                            <dd><em><a href="">历史</a></em><em><a href="">心理学</a></em><em><a href="">政治/军事</a></em><em><a
                                                    href="">国学/古籍</a></em><em><a href="">哲学/宗教</a></em><em><a href="">社会科学</a></em></dd>
                                        </dl>
                                        <dl class="fore6">
                                            <dt>经管励志</dt>
                                            <dd><em><a href="">经济</a></em><em><a href="">金融与投资</a></em><em><a href="">管理</a></em><em><a
                                                    href="">励志与成功</a></em>
                                            </dd>
                                        </dl>
                                        <dl class="fore7">
                                            <dt>生活</dt>
                                            <dd><em><a href="">家庭与育儿</a></em><em><a href="">旅游/地图</a></em><em><a
                                                    href="">烹饪/美食</a></em><em><a
                                                    href="">时尚/美妆</a></em><em><a href="">家居</a></em><em><a href="">婚恋与两性</a></em><em><a
                                                    href="">娱乐/休闲</a></em><em><a
                                                    href="">健身与保健</a></em><em><a href="">动漫/幽默</a></em><em><a href="">体育/运动</a></em></dd>
                                        </dl>
                                        <dl class="fore8">
                                            <dt>科技</dt>
                                            <dd><em><a href="">科普</a></em><em><a href="">IT</a></em><em><a href="">建筑</a></em><em><a
                                                    href="">医学</a></em><em><a href="">工业技术</a></em><em><a href="">电子/通信</a></em><em><a
                                                    href="">农林</a></em><em><a
                                                    href="">科学与自然</a></em></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h3><a href="">彩票、旅行</a></h3>
                            </div>
                            <div class="item">
                                <h3><a href="">理财、众筹</a></h3>
                            </div>
                            <div class="item">
                                <h3><a href="">母婴、玩具</a></h3>
                            </div>
                            <div class="item">
                                <h3><a href="">箱包</a></h3>
                            </div>
                            <div class="item">
                                <h3><a href="">运动户外</a></h3>
                            </div>
                            <div class="item">
                                <h3><a href="">箱包</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="yui3-u Center navArea">
                    <ul class="nav">
                        <li class="f-item">服装城</li>
                        <li class="f-item">美妆馆</li>
                        <li class="f-item">汇才超市</li>
                        <li class="f-item">全球购</li>
                        <li class="f-item">闪购</li>
                        <li class="f-item">团购</li>
                        <li class="f-item">有趣</li>
                        <li class="f-item"><a href="seckill-index.html" target="_blank">秒杀</a></li>
                    </ul>
                </div>
                <div class="yui3-u Right"></div>
            </div>
        </div>
    </div>
    <!--list-content-->
    <div class="main">
        <div class="py-container">
            <!--bread-->
            <div class="bread">
                <ul class="fl sui-breadcrumb">
                    <li>
                        <a href="#">全部结果</a>
                    </li>
                </ul>
                <ul class="fl sui-tag">
                    <li class="with-x">手机</li>
                    <li class="with-x">iphone<i>×</i></li>
                    <li class="with-x">华为<i>×</i></li>
                    <li class="with-x">OPPO<i>×</i></li>
                </ul>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div class="type-wrap logo">
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li>索尼（SONY）</li>
                            <li>TCL</li>
                            <li>长虹（CHANGHONG）</li>
                            <li>飞利浦（PHILIPS）</li>
                            <li>风行电视</li>
                            <li><img src="../img/_/phone06.png"/></li>
                            <li><img src="../img/_/phone07.png"/></li>
                            <li><img src="../img/_/phone08.png"/></li>
                            <li><img src="../img/_/phone09.png"/></li>
                            <li><img src="../img/_/phone10.png"/></li>
                            <li><img src="../img/_/phone11.png"/></li>
                            <li><img src="../img/_/phone12.png"/></li>
                            <li><img src="../img/_/phone12.png"/></li>
                            <li><img src="../img/_/phone14.png"/></li>
                            <li><img src="../img/_/phone01.png"/></li>
                            <li><img src="../img/_/phone06.png"/></li>
                            <li><img src="../img/_/phone07.png"/></li>
                            <li><img src="../img/_/phone02.png"/></li>
                        </ul>
                    </div>
                    <div class="ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                        <a href="javascript:void(0);">更多</a>
                    </div>
                </div>
                <div class="type-wrap">
                    <div class="fl key">网络制式</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li>
                                <a>GSM（移动/联通2G）</a>
                            </li>
                            <li>
                                <a>电信2G</a>
                            </li>
                            <li>
                                <a>电信3G</a>
                            </li>
                            <li>
                                <a>移动3G</a>
                            </li>
                            <li>
                                <a>联通3G</a>
                            </li>
                            <li>
                                <a>联通4G</a>
                            </li>
                            <li>
                                <a>电信3G</a>
                            </li>
                            <li>
                                <a>移动3G</a>
                            </li>
                            <li>
                                <a>联通3G</a>
                            </li>
                            <li>
                                <a>联通4G</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap">
                    <div class="fl key">显示屏尺寸</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li>
                                <a>4.0-4.9英寸</a>
                            </li>
                            <li>
                                <a>4.0-4.9英寸</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap">
                    <div class="fl key">摄像头像素</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li>
                                <a>1200万以上</a>
                            </li>
                            <li>
                                <a>800-1199万</a>
                            </li>
                            <li>
                                <a>1200-1599万</a>
                            </li>
                            <li>
                                <a>1600万以上</a>
                            </li>
                            <li>
                                <a>无摄像头</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap">
                    <div class="fl key">价格</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li>
                                <a>0-500元</a>
                            </li>
                            <li>
                                <a>500-1000元</a>
                            </li>
                            <li>
                                <a>1000-1500元</a>
                            </li>
                            <li>
                                <a>1500-2000元</a>
                            </li>
                            <li>
                                <a>2000-3000元 </a>
                            </li>
                            <li>
                                <a>3000元以上</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                    </div>
                </div>
                <div class="type-wrap">
                    <div class="fl key">更多筛选项</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li>
                                <a>特点</a>
                            </li>
                            <li>
                                <a>系统</a>
                            </li>
                            <li>
                                <a>手机内存 </a>
                            </li>
                            <li>
                                <a>单卡双卡</a>
                            </li>
                            <li>
                                <a>其他</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                    </div>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li>
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li>
                                <a href="#">价格⬆</a>
                            </li>
                            <li>
                                <a href="#">价格⬇</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--显示商品列表信息-->
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="product in productList">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a href="javascript:;"><img :src="product.productPicture" @click="productDetail(product.productId)"/></a>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{product.productPrice | numFilter}}</i>
                                    </strong>
                                </div>
                                <div class="attr">
                                    <a target="_blank" href="javascript:;"
                                       :title="product.productIntroduction">{{product.productIntroduction}}</a>
                                </div>
                                <div class="commit">
                                    <i class="command">已有<span>2000</span>人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="javascript:;" class="sui-btn btn-bordered btn-danger"
                                       @click="addShopCartOrCollect(product.productId,true,false,1)">加入购物车</a>
                                    <a href="javascript:;" @click="addShopCartOrCollect(product.productId,false,true)"
                                       class="sui-btn btn-bordered">收藏</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--分页-->
                <div class="fr page">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 50, 100, 200]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                    </el-pagination>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="../img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="../img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="../img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="../img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>汇才E卡</li>
                                <li>汇才通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="../img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>© 2020 版权所有 广州汇才创智科技有限公司</p>
                    <p>粤ICP备20043971号</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->

    <!-- 基础js库 -->

    <!--侧栏面板开始-->
    <div class="J-global-toolbar">
        <div class="toolbar-wrap J-wrap">
            <div class="toolbar">
                <div class="toolbar-panels J-panel">

                    <!-- 购物车 -->
                    <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-cart toolbar-animate-out">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="" class="title"><i></i><em class="title">购物车</em></a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('cart');"></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div id="J-cart-tips" class="tbar-tipbox hide">
                                    <div class="tip-inner">
                                        <span class="tip-text">还没有登录，登录后商品将被保存</span>
                                        <a href="#none" class="tip-btn J-login">登录</a>
                                    </div>
                                </div>
                                <div id="J-cart-render">
                                    <!-- 列表 -->
                                    <div id="cart-list" class="tbar-cart-list">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 小计 -->
                        <div id="cart-footer" class="tbar-panel-footer J-panel-footer">
                            <div class="tbar-checkout">
                                <div class="jtc-number"><strong class="J-count" id="cart-number">0</strong>件商品</div>
                                <div class="jtc-sum"> 共计：<strong class="J-total" id="cart-sum">¥0</strong></div>
                                <a class="jtc-btn J-btn" href="#none" target="_blank">去购物车结算</a>
                            </div>
                        </div>
                    </div>

                    <!-- 我的关注 -->
                    <div style="visibility: hidden;" data-name="follow" class="J-content toolbar-panel tbar-panel-follow">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的关注</em> </a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('follow');"></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div class="tbar-tipbox2">
                                    <div class="tip-inner"><i class="i-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="tbar-panel-footer J-panel-footer"></div>
                    </div>

                    <!-- 我的足迹 -->
                    <div style="visibility: hidden;" class="J-content toolbar-panel tbar-panel-history toolbar-animate-in">
                        <h3 class="tbar-panel-header J-panel-header">
                            <a href="#" target="_blank" class="title"> <i></i> <em class="title">我的足迹</em> </a>
                            <span class="close-panel J-close" onclick="cartPanelView.tbar_panel_close('history');"></span>
                        </h3>
                        <div class="tbar-panel-main">
                            <div class="tbar-panel-content J-panel-content">
                                <div class="jt-history-wrap">
                                    <ul>
                                        <li class="jth-item">
                                            <a href="#" class="img-wrap"> <img src="../img/like_03.png" height="100" width="100"/> </a>
                                            <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
                                            <a href="#" target="_blank" class="price">￥498.00</a>
                                        </li>
                                        <li class="jth-item">
                                            <a href="#" class="img-wrap"> <img src="../img/like_02.png" height="100" width="100"/></a>
                                            <a class="add-cart-button" href="#" target="_blank">加入购物车</a>
                                            <a href="#" target="_blank" class="price">￥498.00</a>
                                        </li>
                                    </ul>
                                    <a href="#" class="history-bottom-more" target="_blank">查看更多足迹商品 &gt;&gt;</a>
                                </div>
                            </div>
                        </div>
                        <div class="tbar-panel-footer J-panel-footer"></div>
                    </div>

                </div>

                <div class="toolbar-header"></div>

                <!-- 侧栏按钮 -->
                <div class="toolbar-tabs J-tab">
                    <div onclick="cartPanelView.tabItemClick('cart')" class="toolbar-tab tbar-tab-cart" data="购物车" tag="cart">
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count " id="tab-sub-cart-count">0</span>
                    </div>
                    <div onclick="cartPanelView.tabItemClick('follow')" class="toolbar-tab tbar-tab-follow" data="我的关注" tag="follow">
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count hide">0</span>
                    </div>
                    <div onclick="cartPanelView.tabItemClick('history')" class="toolbar-tab tbar-tab-history" data="我的足迹" tag="history">
                        <i class="tab-ico"></i>
                        <em class="tab-text"></em>
                        <span class="tab-sub J-count hide">0</span>
                    </div>
                </div>

                <div class="toolbar-footer">
                    <div class="toolbar-tab tbar-tab-top"><a href="#"> <i class="tab-ico  "></i> <em class="footer-tab-text">顶部</em> </a>
                    </div>
                    <div class="toolbar-tab tbar-tab-feedback"><a href="#" target="_blank"> <i class="tab-ico"></i> <em
                            class="footer-tab-text ">反馈</em> </a></div>
                </div>

                <div class="toolbar-mini"></div>

            </div>

            <div id="J-toolbar-load-hook"></div>

        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            currentPage: 1,
            pageSize: 10,
            total: 200,
            productList: [],
            productName: ''
        },
        created() {
            this.fuzzyPagingQuery();
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                console.log(this.pageSize)
                this.fuzzyPagingQuery();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
                this.fuzzyPagingQuery();
            },

            /*模糊分页查询*/
            fuzzyPagingQuery() {
                let url = "/SpringBoot/product/fuzzyPagingQuery";
                let _this = this;
                // alert(_this.userName);
                console.log(_this.productName)
                /*get请求*/
                axios.get(url, {
                    params: {
                        productName: _this.productName,
                        pageIndex: _this.currentPage,
                        pageRows: _this.pageSize
                    }
                }).then(function (response) {
                    if (response.data.success == true) {
                        _this.total = response.data.total;
                        _this.productList = response.data.productList;
                    } else {
                        _this.msg = response.data.msg;
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            /*加入购物车或者收藏夹*/
            addShopCartOrCollect(productId, isShopCart, isCollect, productNum) {
                console.log(productId)
                let url = "/SpringBoot/product/addShopCartOrCollect";
                let shopCart = {
                    productId:productId,
                    productNum:productNum,
                    isCollect:isCollect,
                    isShopCart:isShopCart
                }
                axios.post(url, shopCart).then(function (response) {
                    alert(response.data.message)
                }).catch(function (error) {
                    console.log(error);
                })
            },
            productDetail(productId){
                console.log(productId);
                let url = "/SpringBoot/product/productDetail";
                let product = {
                    productId:productId,
                }
                axios.post(url, product).then(function (response) {
                    if(response.data.success){
                        /*把 productId 存入浏览器*/
                        sessionStorage.setItem('productId', productId)
                        window.open("item");
                    }else {
                        alert(response.data.message)
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            }

        },
        filters: {
            /*价格保留两位小数*/
            numFilter(value) {
                /*// 截取当前数据到小数点后两位
                let realVal = parseFloat(value).toFixed(2);
                // num.toFixed(2)获取的是字符串
                return parseFloat(realVal);*/
                return (Math.round(value * 100) / 100).toFixed(2);
            }
        }
    })

    /*退出登录*/
    function userLogout() {
        let flag = confirm("您确定要退出登录吗?")
        if (flag) {
            $.ajax({
                url: "/SpringBoot/user/userLogout",
                type: "post",
                dataType: "json",
                data: "",
                success: function (data) {
                    if (data.success) {
                        /*刷新当前页面*/
                        location.reload();
                    }
                },
                error: function () {
                    $("#message").html("数据获取失败");
                }
            })
        }
    }
    /*购物车跳转*/
    function getShopCartByUid() {
        $.ajax({
            url: "/SpringBoot/user/getShopCartByUid",
            type: "post",
            dataType: "json",
            data: "",
            success: function (data) {
                if(data.success){
                    window.open("cart");
                }else {
                    alert(data.message)
                }
            },
            error: function () {
                $("#message").html("数据获取失败");
            }
        })
    }
    /*订单跳转*/
    function userOrder() {
        // window.open("myOrder");
        $.ajax({
            url: "/SpringBoot/user/isUserLogin",
            type: "post",
            dataType: "json",
            data: "",
            success: function (data) {
                if(data.success){
                    window.open("myOrder");
                }else {
                    alert(data.message)
                }
            },
            error: function () {
                $("#message").html("数据获取失败");
            }
        })
    }
</script>
</body>

</html>
